<template>
  <div>
    <h2>质量统计</h2>
    <!-- <div class="chart">
     
      <div ref="social" style="width: 100%; height: 100%" />
    </div> -->
    <div class="chart">
      <!-- 图表 -->
      <div ref="circle" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    this.getCircle()
  },
  methods: {

    getCircle() {
      this.circle = echarts.init(this.$refs.circle);
      this.circle.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        // 图表标题
        title: {
          text: "质量占比",
          left: "center",
        },
        series: [
          {
            // name: "灯芯偏质量占比",
            type: "pie",
            // radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
            labelLine: {
              show: false,
            },
            data: [
              // { value: 1048, name: "质量总数" },
              { value: 235, name: "灯芯偏总数" },
              { value: 235, name: "其他总数" },
              { value: 235, name: "液面气泡不平整总数" },
              { value: 235, name: "蜡杂质总数" },
              { value: 235, name: "蜡脏总数" },
              
            ],
          },
        ],
      });
    },
  },
  components: {},
  props: {},
  watch: {},
  computed: {},
  created() {},
};
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>
